<template>
	<view class="page">
		<view class="code">
			<view class="code-box">
				<view class="code-title">
					我的收款码
				</view>
				<view class="code-img-box" @longtap='save_img()'>
					<image :src="code_img1" mode="aspectFit"></image>
				</view>
				<view class="code-foot">
					<view class="code-foot-text1">
						扫码二维码向我转账付款
					</view>
					<view class="code-foot-text2">
						<!-- 扫描二维码将自动识别为本用户推广会员 -->
					</view>
				</view>
			</view>
		</view>
		<view class="save">
			长按二维码保存到相册
		</view>

	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import Config from '@/common/js/config.js'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				code_img1: '',
			}
		},
		onLoad() {
			if (uni.getStorageSync('token')) {
				this.Getimg();
			} else {
				this.$util.redirectTo('/pages/member/index/index');
			}
		},

		mounted() {

		},

		methods: {
			// 
			Getimg() {
				this.$api.sendRequest({
					url: '/api/member/getMobileTransferAccountsQrcode',
					success: res => {
						if (res.code == 0) {
							// console.log(res,'拿收款码')
							this.code_img1 = res.data;
						}
					}
				});
			},
			// 保存到相册
			// save_img() {
			// 	let _url = this.code_img1;
			// 	uni.showActionSheet({
			// 		itemList: ['保存图片'],
			// 		success: (res) => {
			// 			console.log('保存图片',res);
			// 			if (res.tapIndex == 0) {
			// 				uni.downloadFile({
			// 					url: _url,
			// 					success: (res) => {
			// 						console.log('保存状态',res);
			// 						if (res.statusCode === 200) {
			// 							uni.saveImageToPhotosAlbum({
			// 								filePath: res.tempFilePath,
			// 								success: function() {
			// 									uni.showToast({
			// 										title: "保存成功",
			// 										icon: "success"
			// 									});
			// 								},
			// 								fail: function() {
			// 									uni.showToast({
			// 										title: "保存失败，请稍后重试",
			// 										icon: "none"
			// 									});
			// 								}
			// 							});
			// 						}
			// 					}
			// 				})
			// 			}
			// 		},
			// 		fail: function(res) {
			// 			console.log(res);
			// 		}
			// 	});
			// },
			
			save_img() {
				uni.showActionSheet({
					itemList: ['保存图片'],
					success: (res) => {
						console.log('保存图片',res);
						if (res.tapIndex == 0) {
							let base64 = this.code_img1;
							const bitmap = new plus.nativeObj.Bitmap("test");
							bitmap.loadBase64Data(base64, function() {
							    const url = "_doc/" + new Date().getTime() + ".png";  // url为时间戳命名方式
							    console.log('saveHeadImgFile', url)
							    bitmap.save(url, {
							        overwrite: true,  // 是否覆盖
							        // quality: 'quality'  // 图片清晰度
							    }, (i) => {
							        uni.saveImageToPhotosAlbum({
							            filePath: url,
							            success: function() {
							                uni.showToast({
							                    title: '图片保存成功',
							                    icon: 'none'
							                })
							                bitmap.clear()
							            }
							        });
							    }, (e) => {
							        uni.showToast({
							            title: '图片保存失败',
							            icon: 'none'
							        })
							        bitmap.clear()
							    });
							}, (e) => {
							    uni.showToast({
							        title: '图片保存失败',
							        icon: 'none'
							    })
							    bitmap.clear()
							});
						}
					},
					fail: function(res) {
						console.log(res);
					}
				});
				    
			},


			close() {
				this.$refs.posters.close()
			},
		
			
		
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		// background-color: #F8F8F8;
		background-color: white;
		height: 100vh;

		.code {
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 30rpx;
			padding-top: 250rpx;

			.code-box {
				width: 100%;
				background-color: white;
				padding: 20rpx;
				box-sizing: border-box;

				.code-title {
					text-align: center;
					margin-bottom: 10rpx;
					font-size: 30rpx;

					.code-title-text {
						background-color: #017FFF;
						border-radius: 12rpx;
						margin-left: 10rpx;
						padding: 10rpx;
						color: white;

					}
				}

				.code-img-box {
					width: 100%;
					display: flex;
					justify-content: center;

					image {
						width: 75%;
					}
				}

				.code-foot {
					margin-top: 10rpx;
					text-align: center;

					.code-foot-text1 {
						line-height: 1;
					}

					.code-foot-text2 {
						color: #909399;
						font-size: 28rpx;
					}
				}
			}
		}

		.save {
			margin-top: 15rpx;
			text-align: center;
			color: #909399;
			font-size: 28rpx;
		}

		.footer {
			position: fixed;
			bottom: 0;
			background-color: white;
			border-top: 2rpx solid #D4D4D4;
			width: 100%;
			display: flex;
			height: 100rpx;

			.footer-item {
				font-size: 30rpx;
				line-height: 100rpx;
				flex: 1;
				text-align: center;
				color: #909399;
			}

			.active {
				color: #FF315B;
			}
		}

		.wap-floating {
			.image-wrap {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				image {
					height: 800rpx;
					width: 100%;
				}
			}

			.btn-group {
				display: flex;
				height: 100rpx;

				.btn-item {
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					width: 50%;
				}

				.line-color {
					line-height: 95rpx;
					width: 10rpx;
					color: #909399;
				}

				.save-color {
					color: #00D16A;
				}
			}
		}

		

	}
</style>
<style scoped>
	/deep/ .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
		border-radius: 6px;
		width: 85%;
		/* height: 70%; */
	}
</style>
